<template>
    <select v-model="value" class="11" v-bind:name="name" v-on:change="onchange">
        <option selected value disabled v-if="!!placeholder">{{ placeholder }}</option>
        <option v-for="option in options" v-bind:value="option.value">
        {{ option.alias }}
        </option>
    </select>
</template>

<script>
    // todo 错误处理还需要斟酌
    import Vue from 'vue';
    import co from 'co';
    import extend from 'extend';
    import util from 'util';
    export default Vue.extend({
        props:{
            dataSource:{
                type: String,
                required: true
            },
            placeholder:{
                type: String,
                default: ''
            },
            name: {
                type: String,
                default: ''
            },
            params: {
                type: Object,
                default: function(){
                    return {};
                }
            },
            onchange: {
                type: Function,
                default: function(){
                    return function(){

                    };
                }
            }
        },
        data:function(){
            return {
                options:[],
                value:''
            }
        },
        created: function(){
            co(this._refresh);

            co(this._initWatch);
        },
        methods: {
            /**
             * 注册监听
             */
            _initWatch: function* (){

                // 在 dataSource 变化的时候重新刷新选项
                this.$watch('dataSource', function(value){
                    co(this._refresh);
                });

                // 在 params 变化的时候重新渲染选项
                this.$watch('params', function(value){
                    co(this._refresh);
                });

            },
            /**
             * 获取数据
             */
            _getData: function* (){

                // 没有定义 dataSource 的时候返回 []
                if(!this.dataSource){
                    return Promise.resolve([]);
                }

                // 当 dataSource 为string的时候，它作为一个数据接口的url,并且获取 url 中的数据
                if(util.isString(this.dataSource)){

                    var response = yield this.$http.get(this.dataSource, this.params);
                    if(response.data.status === 0){
                        return Promise.resolve(response.data.data);
                    }else{
                        return Promise.resolve([]);
                    }
                }

                // 当 dataSource 为 Array 类型的时候，它作为数据本身直接返回
                if(util.isArray(this.dataSource)){
                    return Promise.resolve(this.dataSource);
                }

                return Promise.resolve([]);
            },
            /**
             * 刷新下拉列表
             */
            _refresh: function* (){
                var data = yield co(this._getData);

                this.options = data;
                if(!this.placeholder && this.options.length > 0){
                    // 当placeholder没有设置的时候，value 默认为第一个option
                    this.value = this.options[0].value||'';
                }else{
                    // 当placeholder设置的时候，重置 value 为 ''
                    this.value = 0;
                }

                this.onchange();
            },
            /**
             * 扩展参数
             */
            extendParams: function(params){
                // 不可以这样写，extend(this.params, params)，因为 params 是 observe 对象
                this.params = extend({}, this.params, params);
            }
        }
    });

</script>
